<script setup lang="ts">

import Footer from "../components/Footer.vue";
import {useRoute, useRouter} from 'vue-router'
import {computed, onBeforeMount, onMounted, onUpdated, reactive, ref} from "vue";
import {addDeliveryAddress} from "../network/api.ts";

const route = useRoute()
const router = useRouter()
let businessId = route.query.businessId
let user = ref({
  userId:sessionStorage.getItem("userId"),
  password:"",
  userName:sessionStorage.getItem("userName"),
  userSex:sessionStorage.getItem("userSex"),
  userImg:""
})
let deliveryAddress = reactive({
  daId:0,
  contactName:"",
  contactSex:1,
  contactTel:"",
  address:"",
  userId:""
})//只有面对需要放在数组里面做声明的时候, 才是用reactive 对象

function addUserAddress(){
  if(deliveryAddress.contactName==''){
    alert('联系人姓名不能为空！');
    console.log('联系人姓名不能为空！');
    return;
  }
  if(deliveryAddress.contactTel==''){
    alert('联系人电话不能为空！');
    console.log('联系人电话不能为空！');
    return;
  }
  if(deliveryAddress.address==''){
    alert('联系人地址不能为空！');
    console.log('联系人地址不能为空！');
    return;
  }
  deliveryAddress.userId = user.value.userId;
  let data = reactive({
    ctName:deliveryAddress.contactName,
    ctSex:deliveryAddress.contactSex,
    ctTel:deliveryAddress.contactTel,
    address:deliveryAddress.address,
    userId:deliveryAddress.userId
  })
  addDeliveryAddress(data).then(res=>{
    console.log("res.data[contactName] = "+res.data.result.contactName)
    if(res.data.result!=null){
      router.push({
        path:"/userAddress",
        query:{businessId:businessId}
      })
    }else{
      alert('新增地址失败！');
      console.log('新增地址失败！');
    }
  }).catch(error=>{
    console.error(error)
  })
}


</script>

<template>

  <div class="wrapper w-full h-full ">

    <!-- header部分 -->
    <header class="w-full h-[12vw] bg-[#0097ff] flex justify-around items-center text-white text-[4.8vw] fixed left-0 top-0 z-1000">
      <p>新增送货地址</p>
    </header>

    <!-- 表单部分 -->
    <ul class="form-box w-full mt-[12vw]">
      <li class="box-border pt-[4vw] pb-0 pl-[3vw] pr-[3vw] flex">
        <div class="title flex text-[3vw] font-700 text-[#666]">
          联系人：
        </div>
        <div class="content flex-1 flex items-center">
          <input type="text"
                 class="border-none outline-none w-full h-[4vw] text-[3vw]"
                 v-model="deliveryAddress.contactName"
                 placeholder="联系人姓名">
        </div>
      </li>
      <li class="box-border pt-[4vw] pb-0 pl-[3vw] pr-[3vw] flex">
        <div class="title flex text-[3vw] font-700 text-[#666]">
          性别：
        </div>
        <div class="content flex-1 flex items-center" style="font-size: 3vw;">
          <input type="radio" value="1"
                 v-model="deliveryAddress.contactSex"
                 style="width:6vw;height:3.2vw;">男
          <input type="radio" value="0"
                 v-model="deliveryAddress.contactSex"
                 style="width:6vw;height:3.2vw;">女
        </div>
      </li>
      <li class="box-border pt-[4vw] pb-0 pl-[3vw] pr-[3vw] flex">
        <div class="title flex text-[3vw] font-700 text-[#666]">
          电话：
        </div>
        <div class="content flex-1 flex items-center">
          <input type="tel"
                 class="border-none outline-none w-full h-[4vw] text-[3vw]"
                 v-model="deliveryAddress.contactTel"
                 placeholder="电话">
        </div>
      </li>
      <li class="box-border pt-[4vw] pb-0 pl-[3vw] pr-[3vw] flex">
        <div class="title flex text-[3vw] font-700 text-[#666]">
          收货地址：
        </div>
        <div class="content flex-1 flex items-center">
          <input type="text"
                 class="border-none outline-none w-full h-[4vw] text-[3vw]"
                 v-model="deliveryAddress.address"
                 placeholder="收货地址">
        </div>
      </li>
    </ul>

    <div class="button-add box-border pt-[4vw] pb-0 pl-[3vw] pr-[3vw]">
      <button class="w-full h-[10vw] text-[3.8vw] font-700 border-none outline-none rounded-[4px] text-white bg-[#38ca73]" @click="addUserAddress">保存</button>
    </div>
<!--    <div>为毛会滚动啊, 什么东西?</div>-->

    <Footer></Footer>

  </div>

</template>

<style scoped>

</style>